<template>
  <div>
    <div class="div1">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-row>
          <el-col :span="9" class="ziti">房型筛选</el-col>
        </el-row>
        <el-row>
          <el-col :span="9">
            <el-select v-model="form.housestateId" @change="gethouselists()">
              <el-option label="全部房型" :value="0"></el-option>
              <el-option
                v-for="item in houseroomstatelist"
                :key="item.id"
                :label="item.houseName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="9" class="ziti">房型筛选</el-col>
        </el-row>
        <el-row>
          <el-col :span="9">
            <el-radio-group
              v-model="form.housetypevalue"
              @change="gethouselists()"
            >
              <el-button
                v-for="item in housestate"
                :key="item.value"
                class="tiaojian"
                :label="item.value"
                >{{ item.name }}</el-button
              >
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="9" class="ziti">更多筛选</el-col>
        </el-row>
        <el-row>
          <el-col :span="9">
            <el-radio-group
              v-model="form.housetypegengduo"
              @change="gethouselists()"
            >
              <el-button
                v-for="item in housestategengduo"
                :key="item.value"
                class="tiaojian"
                :label="item.value"
                >{{ item.name }}
              </el-button>
            </el-radio-group>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="div2">
      <div v-for="items in housestatelist" :key="items.houseName" class="group">
        <span class="group-title">{{ items.houseName }}</span>
        <el-card
          class="box-card"
          style="width: 250px; heigh: 100px"
          v-for="aa in items.houseRoomList"
          :key="aa.id"
        >
          <div slot="header">
            <span>{{ aa.roomNumber }}</span>
            <el-tag v-if="aa.roomRoomState == 2" type="warning">脏房</el-tag>
            <el-tag v-if="aa.roomRoomState == 3" type="danger">维修</el-tag>
            <el-dropdown>
              <span style="margin: 0 0 0 100px; width: 10px; heigh: 5px">
                •••
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-button
                  class="buttonstate"
                  style="display: block"
                  type="size"
                  >办理入住</el-button
                >
                <el-button style="display: block" type="size"
                  >办理预定</el-button
                >
                <el-button
                  style="display: block"
                  type="size"
                  @click="updatej(aa.id)"
                  >设为净房</el-button
                >
                <el-button
                  style="display: block"
                  type="size"
                  @click="update(aa.id)"
                  >设为脏房</el-button
                >
                <el-button
                  style="display: block"
                  type="size"
                  @click="updatew(aa.id)"
                  >设为维修</el-button
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="div3"></div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { gethouse } from "@/api/room";
import {
  gethousestate,
  gethousegengduo,
  gethousestatelists,
  Updatehousestatelists,
} from "@/api/housestate";

export default {
  name: "VueElementAdminFixInstallProblemHouseTypeList",

  data() {
    return {
      form: {
        housestateId: 0,
        housetypevalue: 0,
        housetypegengduo: 0,
      },
      housestateform: {
        stateid: 0,
        state: 0,
      },

      houseroomstatelist: [],
      housestate: [],
      housestategengduo: [],
      housestatelist: [],
    };
  },

  mounted() {
    //页面加载房型筛选
    this.getroomstate();
    this.gethousestates();
    this.gethousegengduo();
    this.gethouselists();
  },

  methods: {
    //修改状态
    updatej(id) {
      console.log("id");
      this.housestateform.stateid = id;
      this.housestateform.state = 1;
      Updatehousestatelists(this.housestateform).then((res) => {
        if (res.data == 200) {
          this.$message.success("已设置");
          this.gethouselists();
        }
      });
    },
    updatew(id) {
      console.log("id");
      this.housestateform.stateid = id;
      this.housestateform.state = 3;
      Updatehousestatelists(this.housestateform).then((res) => {
        if (res.data == 200) {
          this.$message.success("已设置");
          this.gethouselists();
        }
      });
    },
    update(id) {
      console.log("id");
      this.housestateform.stateid = id;
      this.housestateform.state = 2;
      Updatehousestatelists(this.housestateform).then((res) => {
        if (res.data == 200) {
          this.$message.success("已设置");
          this.gethouselists();
        }
      });
    },
    //第一个筛选
    gethousestates() {
      gethousestate().then((res) => {
        this.housestate = res.data;
      });
    },
    //第二个筛选
    gethousegengduo() {
      gethousegengduo().then((res) => {
        this.housestategengduo = res.data;
      });
    },
    //房态结果
    gethouselists() {
      gethousestatelists(this.form).then((res) => {
        this.housestatelist = res.data;
      });
    },
    //房型筛选
    getroomstate() {
      gethouse().then((res) => {
        this.houseroomstatelist = res.data;
      });
    },
  },
};
</script>
<style>
.div1 {
  width: 300px;
  height: 100vh;

  float: left;
  border-right: 1px dashed black;
}
.div2 {
  width: 800px;
  height: 100vh;
  margin-left: 20px;
  float: left;
}
.el-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.tiaojian {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}
.ziti {
  font-weight: 600;
}
.el-dropdown-link {
  position: absolute;
  left: 100px;
}
.group {
  widows: 1000px;
  height: 200px;
  position: relative; /* 添加了相对定位 */
  margin-bottom: 20px; /* 设置不同组的纵向间距 */
}
.group-title {
  position: absolute; /* 添加了绝对定位 */
  top: 0; /* 放置在上方 */
  left: 0; /* 放置在右边 */
  padding: 5px;
  background-color: #f0f0f0;
}
.box-card {
  display: inline-block; /* 设置同一组的横向浮动 */
  margin-right: 10px; /* 设置同一组的横向间距 */
  margin-top: 35px;
}
.el-col el-col-9 {
  display: flex;
  justify-content: center;
}
</style>
<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.buttonstate {
  margin-left: 10px;
}
</style>
<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
</style>
<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
/* .box-card {
  width: 400px;
} */
</style>